class Enlarge 
{
    constructor(el, options = {})
    {
        // 保存数据
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')

        // 写特效
        // this.overOut()
        // this.maskMove()
        // this.tbEnlarge()
        this.init()
    }

    init() {
        this.overOut()
        this.maskMove()
        // this.tbEnlarge()
    }

    overOut() {
        // this === enlarge1/enlarge2
        // 给【左侧图片】绑定移入事件：显示
        // this.el.querySelector('.img').onmouseover = function() { // this 事件源
        // this.el.querySelector('.img').onmouseover = () => { // this 事件源
        //     this.el.querySelector('.mask').style.display = 'block'
        //     this.el.querySelector('.enlarge').style.display = 'block'
        // }
        // // 给【左侧图片】绑定移出事件：隐藏
        // this.el.querySelector('.img').onmouseout = () => { // this 事件源
        //     this.el.querySelector('.mask').style.display = 'none'
        //     this.el.querySelector('.enlarge').style.display = 'none'
        // }

        this.img.onmouseover = () =>  this.mask.style.display = this.enlarge.style.display  = 'block'
        this.img.onmouseout = () =>  this.mask.style.display = this.enlarge.style.display  = 'none'
    }
    maskMove() {
        // 2、绑定鼠标移动事件
        this.img.onmousemove = (evt)=>{
        // 3、事件处理函数中：遮罩框动、放大镜🔍跟着动
        // - 3.1 获取事件对象
        let e = evt || window.event
        // - 3.2 遮罩框动，公式： 鼠标到网页左上角的距离-盒模型到网页左上角的距离-自身宽度高度的一半
        let left = e.pageX - this.el.offsetLeft - this.mask.offsetWidth/2
        let top = e.pageY - this.el.offsetTop - this.mask.offsetHeight/2
          
        if (left<0) left=0
            if (top<0) top=0
            let maxLeft = this.img.clientWidth - this.mask.offsetWidth
            let maxTop = this.img.clientHeight - this.mask.offsetHeight
            if (left>maxLeft) left=maxLeft
            if (top>maxTop) top=maxTop
            this.mask.style.left = left + 'px'
            this.mask.style.top = top + 'px'
            this.tbEnlarge(left,top)
        this.mask.style.left = left + 'px'
        this.mask.style.top = top + 'px'
        this.tbEnlarge(left,top)
        }
    }
    tbEnlarge(left,top) {
         // - 3.3 放大镜🔍跟着动：3.2距离*2
         this.enlarge.style.backgroundPosition = `-${left*2}px -${top*2}px`
   
    }
}


export default Enlarge